<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <meta name="description" content="这一个JavaScript贪吃蛇游戏">
    <meta name="keywords" content="H5游戏,贪吃蛇">
    <link rel="stylesheet" href="./css/reset.css?t=202508271411">
    <link rel="stylesheet" href="./css/index.css?t=202508271411">
    <link rel="stylesheet" href="./css/message.css?t=202508271411">
</head>
<body>

    <div id="app">
        <div class="container">
            <header><h1>贪吃蛇</h1></header>
        </div>
        <div class="container">
            <div class="left">
                <div class="map">
                    <!-- <ul>
                        <li class="snake"></li>
                        <li class="snake"></li>
                        <li class="snake"></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li class="food"></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul> -->
                </div>

                 <!-- 自定义弹窗 -->
                <!-- <div class="message">
                    <div class="message-box">
                         <button class="btn-close">关闭</button>
                         <p>游戏结束~~</p>
                    </div>
                </div> -->
            </div>
            <div class="right">
                  <div class="opt">
                      <span>分数:</span>
                      <span class="score">0</span>
                  </div>
                  <div class="opt">
                    <span>时间:</span>
                    <span class="time">00:00:00</span>
                </div>
                <div class="opt">
                    <button class="btn-play">开始游戏</button>
                    <button class="btn-pause">暂停</button>
                </div>
                <div class="opt">
                      <span>设置音效</span>
                      <button class="btn-toggle">已关闭</button>
                </div>
                <div class="form">
                    <div>地图尺寸: 600 * 600</div>
                     <div>
                        <label>行数量:</label>
                        <input class="row" type="number" value="4" placeholder="多少行">
                     </div>
                     <div>
                        <label>列数量:</label>
                        <input class="col" type="number" value="4" placeholder="多少行">
                     </div>
                     <div>
                        <label>方格宽度:</label>
                        <input class="space-width" type="number" value="150" placeholder="方格宽度" disabled>
                     </div>
                     <div>
                        <label>方格高度:</label>
                        <input class="space-height" type="number" value="150" placeholder="方格高度" disabled>
                     </div>
                     <div>
                        <button class="btn-create">生成地图</button>
                     </div>
                </div>
            </div>
        </div>

        <!-- muted="true" 设置静音 -->
        <audio id="audio_bg" muted="true" src="./music/success.mp3" muted="true" loop="true"></audio>
        <audio class="audio" src=""  muted="true" controls></audio>      
    </div>
    
    <script src="./js/cookie.js?t=2025082714111"></script>
    <script src="./js/main.js?t=2025082714111"></script>
</body>
</html>